<template>
  <div>
    <el-table
      :header-cell-style="{ background: '#f5f6f6' }"
      :data="formPerms"
      border
      style="width: 100%"
    >
      <el-table-column
        prop="title"
        show-overflow-tooltip
        label="表单字段"
        align="center"
      >
      </el-table-column>
      <el-table-column label="可编辑" align="center">
        <template slot-scope="scope">
          <el-checkbox
            v-if="scope.row.title == '全选'"
            v-model="permSelectE"
            @change="allSelect('E')"
          ></el-checkbox>
          <el-radio
            v-else
            v-model="scope.row.editable"
            label="E"
            :name="scope.row.id"
          ></el-radio>
        </template>
      </el-table-column>
      <el-table-column label="只读" align="center">
        <template slot-scope="scope">
          <el-checkbox
            v-if="scope.row.title == '全选'"
            v-model="permSelectR"
            @change="allSelect('R')"
          ></el-checkbox>
          <el-radio
            v-else
            v-model="scope.row.readOnly"
            label="R"
            :name="scope.row.id"
          ></el-radio>
        </template>
      </el-table-column>

      <el-table-column label="隐藏" align="center">
        <template slot-scope="scope">
          <el-checkbox
            v-if="scope.row.title == '全选'"
            v-model="permSelectH"
            @change="allSelect('H')"
          ></el-checkbox>
          <el-radio
            v-else
            v-model="scope.row.hide"
            label="H"
            :name="scope.row.id"
          ></el-radio>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "FormAuthorityConfig",
  components: {},
  data() {
    return {
      formPerms: [
        {
          id: "1",
          perm: "A",
          required: false,
          title: "全选",
          readOnly: false,
          editable: false,
          hide: false,
        },
        {
          id: "field3075207952183",
          perm: "E",
          required: false,
          title: "姓名",
          readOnly: false,
          editable: false,
          hide: false,
        },
        {
          id: "field9800607953714",
          perm: "E",
          required: false,
          title: "学号",
          readOnly: false,
          editable: false,
          hide: false,
        },
      ],
      isIndeterminate: false,
      permSelectH: false,
      permSelectR: false,
      permSelectE: false,
      checkStatus: {
        readOnly: true,
        editable: false,
        hide: false,
      },
    };
  },
  created() {},
  computed: {
    // formPerms() {
    //   return this.$store.state.selectedNode.props.formPerms;
    // },
  },
  methods: {
    allSelect(type) {},
    handleCheckAllChange() {},
  },
  watch: {
    // formPerms: {
    //   deep: true,
    //   handler() {
    //     const set = new Set(this.formPerms.map((f) => f.perm));
    //     this.permSelect = set.size === 1 ? set.values()[0] : "";
    //   },
    // },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-table__row {
  .cell {
    text-align: center;
  }

  .el-radio__label {
    display: none;
  }
}
</style>
